<template>
  <a-layout id="admin-layout-demo">
    <a-layout-header class="header">
      <div class="logo" />
      <a-menu
        theme="dark"
        mode="horizontal"
        :default-selected-keys="[1]"
        :style="{ lineHeight: '40px' }"
      >
        <a-menu-item v-for="(i,k) in topList" :key="k">
          {{i}}
        </a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout style="width:100%;display: flex;flex-direction: row;">
      <div style="min-width: 200px;background: #fff">
          <a-menu
            mode="inline"
            :default-selected-keys="['subnav1option1']"
            :default-open-keys="['subnav1']"
            :style="{ height: '100%', borderRight: 0 }">
          <a-sub-menu v-for="i in leftMean" :key="i.label">
            <span slot="title"><a-icon type="user" />{{i.label}}</span>
            <a-menu-item v-for="j in i.children" :key="`${i.label}${j.label}`">
              {{j.label}}
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </div>
      <a-layout class="admin-content">
        <a-breadcrumb style="margin: 10px 0">
          <a-breadcrumb-item v-for="i in breadcrumb" :key="i.label">{{i.label}}</a-breadcrumb-item>
        </a-breadcrumb>
        <a-layout-content class="admin-container">
            <Nuxt />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
export default {
  data() {
    return {
      collapsed: false,
      topList: ['导航一', '导航二', '导航三'],
      leftMean: [
          { label: 'subnav1', id: 1 ,children: [{label: 'option1', id: 1},{label: 'option2', id: 2},{label: 'option3', id: 3}] },
          { label: 'subnav2', id: 2 ,children: [{label: 'option1', id: 1},{label: 'option2', id: 2},{label: 'option3', id: 3}] },
          { label: 'subnav3', id: 3 ,children: [{label: 'option1', id: 1},{label: 'option2', id: 2},{label: 'option3', id: 3}] },
      ],
      breadcrumb: [{label: 'Home'},{label: 'List'},{label: 'App'}],
    };
  },
};
</script>

<style scoped>
#admin-layout-demo{
    height: 100%;
    overflow: hidden;
}
#admin-layout-demo .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 4px 0 0 0;
  float: left;
}
.header{
    height: 40px;
}
.admin-content{
    padding: 0 0 10px 10px;
}
.admin-content .admin-container{
    overflow-y: scroll;
}
</style>
